<template>
    <div style="margin: 20px 20px 20px 20px;background-color: #080c1b;height:100%">
        <div class="titleboxs">
            <span>中国平安</span>
        </div>
       
        <div class="Detailsbox">
             
            <div class="floats echartsbox">
                <div id="echartsData" ref="echartsData"></div>
            </div>
            <div class="floats infoboxs">
                <div class="technical">
                    <h3>技术面</h3>
                    <ul >
                        <li> 
                            <span>K线段状态(日线)：</span>
                            <em>底部型</em>
                        </li>
                        <li> 
                            <span>资金指标（日线）：</span>
                            <em>0.63</em>
                        </li>
                        <li> 
                            <span>价格位置（周）：</span>
                            <em>0.46%</em>
                        </li>
                        <li> 
                            <span>波动幅度（周）：</span>
                            <em>3.99%</em>
                        </li>
                        <li> 
                            <span>价格位置（月）：</span>
                            <em>1.71%</em>
                        </li>
                        <li> 
                            <span>波动幅度（月）：</span>
                            <em>6.05%</em>
                        </li>
                        <li> 
                            <span>价格位置（季度）：</span>
                            <em>1.71%</em>
                        </li>
                        <li> 
                            <span>波动幅度（季度）：</span>
                            <em>27.60%</em>
                        </li>
                        <li> 
                            <span>价格位置（年）：</span>
                            <em>7.60%</em>
                        </li>
                        <li> 
                            <span>波动幅度（年）：</span>
                            <em>47.60%</em>
                        </li>
                    </ul>
                </div>
                <div class="fundamentals" >
                    <h3>基本面</h3>
                    <ul>
                        <li> 
                            <span>财务指标综合评分：</span>
                            <em>61.6</em>
                        </li>
                        <li> 
                            <span>低估率排名：</span>
                            <em>163</em>
                        </li>
                        <li> 
                            <span>所属行业：</span>
                            <em>汽车零部件</em>
                        </li>
                        <li> 
                            <span>总资产</span>
                            <em>75.14亿元</em>
                        </li>
                        <li> 
                            <span>每股盈利（动）：</span>
                            <em>0.53元</em>
                        </li>
                        <li> 
                            <span>毛利率：</span>
                            <em>15.59%</em>
                        </li>
                        <li> 
                            <span>每股净资产：</span>
                            <em>3.29元</em>
                        </li>
                        <li> 
                            <span>净利率：</span>
                            <em>12.60%</em>
                        </li>
                        <li> 
                            <span>市盈率：</span>
                            <em>7.60</em>
                        </li>
                        <li> 
                            <span>销售增长率：</span>
                            <em>11.60%</em>
                        </li>
                        <li> 
                            <span>市净率：</span>
                            <em>1.60</em>
                        </li>
                        <li> 
                            <span>净利润增长率：</span>
                            <em>6.17%</em>
                        </li>
                    </ul>
                </div>
                
                        
            </div>
        </div>
        <div class="publicCenter" style="">
            <div class="frontPublic">
                <h3>正面舆情</h3>
                <a>更多>></a>
                <ul class="centerbox" >          
                <li ></li>
                </ul>
                
            </div>
            <div class="defeatPublic">
                <h3>正面舆情</h3>
                <a>更多>></a>
                <ul class="centerbox" >
                <li >早评：沪指小幅高开0.09% 钢铁板块拖累市场</li>
                </ul>        
                
            </div>
        </div>

    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data(){
        return{
            stockboxOption: {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '走势',
                    textStyle:{//图例文字的样式
                        color:'#1AC5DC',
                        fontSize:12,
                        
                    }
                },
                legend: {
                    left:'left',
                    data: ['舆情指数', '泸深300'],
                    textStyle:{//图例文字的样式
                        color:'#fff',
                        fontSize:12,
                        
                    }
                },
                // toolbox: {
                //     feature: {
                //         dataZoom: {
                //             yAxisIndex: 'none'
                //         },
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: "",
                    axisLabel: {
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色

                    }
              },
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    axisLabel: {
                    textStyle: {
                        color: '#fff',//坐标值得具体的颜色

                    }
              },
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                    }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [
                    {
                        name:'舆情指数',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal:{
                            color: 'RGB(212, 114, 111)'
                            }
                            
                        },
                        areaStyle: {
                            normal:{
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'RGB(212, 114, 111)'
                            }, {
                                offset: 1,
                                color: 'RGB(212, 114, 111)'
                            }])
                            }
                            
                        },
                        data: ""
                    },
                    {
                        name:'泸深300',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal:{
                            color: 'RGB(109, 125, 135)'
                            }
                            
                        },
                        areaStyle: {
                            normal:{
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'RGB(109, 125, 135)'
                            }, {
                                offset: 1,
                                color: 'RGB(109, 125, 135)'
                            }])
                            }
                            
                        },
                        data: ""
                    }
                ]
            }
        }
    },
    mounted(){
        this.stockboxload()
        this.stockbox = echarts.init(document.getElementById('echartsData'))
        this.stockbox.setOption(this.stockboxOption)
  },
  methods:{
    stockboxload(){
        var base = +new Date(2010, 9, 3);
        var oneDay = 24 * 3600 * 100;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        var data1 = [Math.random() * 400];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
        }

        this.stockboxOption.xAxis.data = date
        this.stockboxOption.series[0].data = data
        this.stockboxOption.series[1].data = data1
        console.log(this.stockboxOption,"ddddddddd")
      }
  }
}
</script>

<style scoped lang='less' >
.Detailsbox{
        height: 460px;
    margin-top: 20px;
    // border-top: 1px solid #eeeeee;
    // border-bottom: 5px solid #eaedf4;
}
.titleboxs{
    width: 100%;
    text-align: center;
    padding-top: 20px;
    span{
        // ont-family: PingFangSC-Medium;
        font-weight: 700;
        font-size: 20px;
        color: #1AC5DC;
        letter-spacing: 0;
        text-align: justify;
    }
}
.Detailsbox .floats{
    float: left;
}
.echartsbox {
   
    width: 60%;
    /* background-color: bisque; */
}
.infoboxs{
    width: 40%; 
    /* float: left; */
    /* background-color: aqua; */
}
.technical{
    clear: both;
    width: 100%;
    color: #FFFFFF;
    
}
.technical ul {
    margin: 10px 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    // border-top: 1px solid #999999;
}
.technical li {
    list-style: none;
    float: left;
    width: 50%;
    height: 25px;
}
.fundamentals {
    padding-top: 20px;
    clear: both;
    width: 100%;
    color: #fff;
}
.fundamentals ul {
    margin: 10px 20px;
    padding-top: 20px;
    // border-top: 1px solid #999999;
}
.fundamentals li {
    list-style: none;
    height: 25px;
    float: left;
    width: 50%;
    font-family: PingFangSC-Regular;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
text-align: justify;
line-height: 32px;
}
.infoboxs em {
    font-size: 14px;
    color: #999999;
    font-weight: 700;
    font-style: normal;
}
.infoboxs span {
    font-weight: 700;
    font-size: 14px;
}
.defeatPublic {
    width: 50%;
}
.frontPublic{
    width: 50%;
}
.publicCenter div {
    background-color: #080c1b;
    height: 100%;
    float: left;
    margin-top: 30px;
    padding-bottom: 50px;
}
.publicCenter a {
    float: right;
    margin-right: 30px;
    margin-top: -30px;     

}
.publicCenter h3 {
    margin-bottom: 10px;    

}
.publicCenter li {
    height: 40px;
    list-style:square;
    margin-left: 20px;
    line-height: 40px;
    font-family: PingFangSC-Regular;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
text-align: justify;
line-height: 32px;
}
.publicCenter li:hover {
    background-color: #363a42;
}
#echartsData{
    width: 90%;
    height: 300px;
    margin: 0 auto;
}
</style>
